<template>
  <div :class="{dark: !openStatus}">
    <base-button type="primary">主要按钮</base-button>
    <base-button type="warning">警告按钮</base-button>
    <!-- <base-button type="xx">警告按钮</base-button> -->

    <!-- 
      给组件写的行内属性，要么就是props属性，要么就是非props属性
    -->
    <BaseInput type="password" placeholder="请输入密码" />


    <div>
      <base-switch v-model="openStatus"/>
      <span>{{ openStatus ? '关灯' : '开灯' }}</span>
    </div>

  </div>
</template>

<script>
import BaseButton from './components/BaseButton.vue'
import BaseInput from './components/BaseInput.vue'
import BaseSwitch from './components/BaseSwitch.vue'
export default {
  components: {
    BaseButton,
    BaseInput,
    BaseSwitch
  },

  data () {

    return {
      openStatus: true
    }
  }
}
</script>

<style lang="less">

.dark {
  height: 100vh;
  background-color: black;

  span {
    color: white;
  }
}
</style>